<script setup lang="ts">
import {computed, reactive, ref, watch, watchEffect} from "vue";

let firstName = ref<string>('')
let secondName = ref<string>('')
let fullName = ref<string>('')
// 属性计算
// let fullName = computed(() => {
//   return firstName.value + secondName.value
// })
// let fullName = computed({
//   get() {
//     return firstName.value + secondName.value
//   },
//   set() {
//   }
// })
interface ObjType {
  name: string,
  age: number
}

let obj = reactive<ObjType>({
  name: '张三',
  age: 20
})
let obj1 = ref<ObjType>({
  name: '李四',
  age: 10
})
// 属性监听  如果监听的属性为ref声明的响应式数据，直接写属性名
// watch(firstName, (newVal, oldVal) => {
// watch([firstName, secondName], (newVal, oldVal) => {
// 如果。。。。reactive ()=>

watch([firstName, secondName, () => obj.age, obj1.value], (newVal, oldVal) => {
  // console.log('监听')
  console.log(newVal)
  console.log(oldVal)
  // fullName.value=newVal+secondName.value
  // fullName.value=firstName.value+secondName.value
  fullName.value = newVal[0] + newVal[1]
}, {
  deep: true,
  immediate: true
})
//  watchEffect 监听所有响应式数据
// watchEffect(() => {
//   console.log('监听')
//   fullName.value = firstName.value + secondName.value
// })
</script>

<template>
  计算监听
  姓：<input type="text" v-model="firstName">
  名：<input type="text" v-model="secondName">
  姓名：<input type="text" v-model="fullName">
</template>

<style scoped>

</style>
